<template>
   <div class="page-box">
      <div class="page-title">
         {{ "采购订单管理" }}
      </div>

      <div class="page-search">
         <div
            class="search-box"
            :style="{ height: IsHeight }"
         >
            <el-input
               v-model="pageData.keyword"
               placeholder="采购单号/供应商/负责人"
               style="width: 200px; margin-right: 10px"
               suffix-icon="search"
               @input="handleInput"
            />
            <h3>显示：</h3>
            <el-button
               :style="{ backgroundColor: pageData.status == item[1] ? '#172B4D' : '', color: pageData.status == item[1] ? '#fff' : '' }"
               v-for="(item, index) in statusEnum"
               :key="index"
               @click="handleStatus(index)"
            >
               {{ statusEnum[index][0] }}
            </el-button>
            <el-button
               plain
               @click="handleReset"
            >
               重置
            </el-button>
         </div>
         <div class="search-btn">
            <div
               class="btn_item"
               @click="handleClickHeight"
            >
               <img
                  class="btn_img"
                  src="@/assets/sx.png"
                  alt=""
               />
               <span> 高级筛选 </span>
            </div>
         </div>
      </div>
      <div
         class="search-btn-right"
         style="right: 9px"
      >
         <el-button
            color="#626aef"
            type="primary"
            @click="handleAddSupplier"
         >
            新增采购单
         </el-button>
      </div>
   </div>

   <div class="table-box">
      <el-table
         :data="tabeData"
         style="width: 100%"
         v-loading="loading"
         border
      >
         <el-table-column
            align="center"
            prop="order_no"
            label="采购单号"
            :show-overflow-tooltip="true"
            width="220"
         >
            <template #default="scope">
               <p
                  style="color: #6860ff; cursor: pointer"
                  @click="orderDetail(scope.row)"
               >
                  {{ scope.row.order_no }}
               </p>
            </template>
         </el-table-column>
         <el-table-column
            align="center"
            prop="type_text"
            label="采购类型"
            width="240"
         >
         </el-table-column>
         <el-table-column
            align="center"
            prop="total_amount"
            label="采购金额(元)"
            width="180"
         />
         <el-table-column
            align="center"
            prop="purchase_date"
            label="采购日期"
            width="180"
         >
         </el-table-column>
         <el-table-column
            align="center"
            prop="status_note"
            label="状态"
            width="140"
         >
            <template #default="scope">
               <el-tag :type="scope.row.status == 0 ? 'danger' : scope.row.status == 1 ? 'warning' : scope.row.status == 2 ? 'success' : 'danger'">
                  {{ scope.row.status_note }}
               </el-tag>
            </template>
         </el-table-column>
         <el-table-column
            align="center"
            prop="manager_name"
            label="采购负责人"
            width="140"
         />
         <el-table-column
            align="center"
            prop="manager_phone"
            label="负责人电话"
            width="140"
         />
         <el-table-column
            align="center"
            prop="note"
            label="备注"
            width="140"
            show-overflow-tooltip
         >
            <template #default="scope">
               <p>{{ scope.row.note ? scope.row.note : "--" }}</p>
            </template>
         </el-table-column>
         <el-table-column
            align="center"
            prop="creator_name"
            label="创建人"
            width="140"
         />
         <el-table-column
            align="center"
            prop="created_at"
            label="创建时间"
            width="180"
         />
         <el-table-column
            fixed="right"
            label="操作"
            width="220"
            prop="id"
            align="center"
         >
            <template #default="scope">
               <div class="btn-box">
                  <el-button
                     v-if="scope.row.status == 0"
                     plain
                     size="small"
                     type="primary"
                     @click="handleEdit(scope.row.id)"
                  >
                     编辑
                  </el-button>
                  <el-button
                     v-if="scope.row.status == 0"
                     plain
                     size="small"
                     type="danger"
                     @click="handleDelete(scope.row.id)"
                  >
                     删除
                  </el-button>
                  <el-button
                     v-if="scope.row.status == 0"
                     plain
                     size="small"
                     type="danger"
                     @click="handleSubmit(scope.row.id)"
                  >
                     提交审核
                  </el-button>
                  <el-button
                     v-if="scope.row.status == 2 && scope.row.pur_state == 0"
                     plain
                     size="small"
                     type="danger"
                     @click="handleComplete(scope.row.id)"
                  >
                     完成采购
                  </el-button>
               </div>
            </template>
         </el-table-column>
      </el-table>
   </div>

   <!-- 分页 -->
   <Pagination
      class="pagination"
      @pageSize="pageSize"
      @getPage="getPage"
      :page="pageData.page"
      :page-size="pageData.page_size"
      :total="total"
   />

   <Dialog
      ref="dialogRef"
      @refreshList="getAlltabeData"
   />
   <WarehouseDetails
      v-model:dialogVisible="DetailsVisible"
      @submit="handleSubmit"
      :orderList="currentOrder"
   />
</template>

<script setup lang="ts">
   import { ref, onMounted, watch } from "vue";
   import { useRouter } from "vue-router";
   import { usePlatformManagementStore } from "@/stores";
   import Pagination from "@/components/Pagination.vue";
   import { throttle } from "lodash-es";
   const router = useRouter();
   import api from "@/api/index.js";
   import Dialog from "./components/NewPurchaseOrder.vue";
   import { ProcurementList } from "./procurementType.ts";
   import { ElMessage, ElMessageBox } from "element-plus";
   import WarehouseDetails from "./components/RightDetail_Pop-Up_Window/OrderManagementDetails.vue";
   let IsHeight = ref<number | string>(0);
   const DetailsVisible = ref(false);
   const search = ref<string>("");
   const dialogRef = ref<any>(null);
   const status = ref<string>("");
   const pageData = ref({
      page_size: 10,
      page: 1,
      status: "", // 状态
      keyword: "", // 搜索关键字
   });
   const total = ref(0);
   const tabeData = ref<ProcurementList[]>([]);
   // 侦听动态分页
   watch(
      () => {
         return pageData.value;
      },
      () => {
         getAlltabeData();
      },
      { deep: true }
   );
   // 编辑
   const handleEdit = (id: number) => {
      dialogRef.value.openLoading(id);
   };
   const currentOrder = ref<ProcurementList>();
   // 订单详情
   const orderDetail = (data: ProcurementList) => {
      DetailsVisible.value = true;
      currentOrder.value = data;
   };
   // 新增供应商
   const handleAddSupplier = () => {
      dialogRef.value.openLoading();
   };
   let nub = ref<number>(0);
   const handleClickHeight = () => {
      nub.value++;
      if (nub.value % 2 == 1) {
         IsHeight.value = "40px";
      } else {
         IsHeight.value = "0px";
      }
   };

   const pageSize = (e: number) => {
      pageData.value.page_size = e;
   };
   const getPage = (e: number) => {
      pageData.value.page = e;
   };
   onMounted(() => {
      getAlltabeData();
   });
   // 获取门店列表
   const getAlltabeData = async () => {
      const res = await api.procurement.purchaseOrderList({
         ...pageData.value,
      });
      if (res.code == 200) {
         tabeData.value = res.data.data;

         total.value = res.data.pager.page_count;
      }
   };
   // 处理状态
   const handleStatus = (index: number) => {
      pageData.value.status = statusEnum.value[index][1];
      getAlltabeData();
   };
   // 删除
   const handleDelete = (id: number) => {
      ElMessageBox.confirm("确定删除该采购单吗？", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
      }).then(async () => {
         await api.procurement.purchaseOrderDel({ id });
         ElMessage.success("删除成功");
         getAlltabeData();
      });
   };
   // 提交审核
   const handleSubmit = (id: number) => {
      ElMessageBox.confirm("确定提交审核吗？", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
      }).then(async () => {
         await api.procurement.purchaseOrderSubmit({ id });
         ElMessage.success("提交审核成功");
         getAlltabeData();
      });
   };
   // 完成采购
   const handleComplete = (id: number) => {
      ElMessageBox.confirm("确定完成采购吗？", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
      }).then(async () => {
         await api.procurement.purchaseOrderFinish({ id });
         ElMessage.success("完成采购成功");
         getAlltabeData();
      });
   };
   // 处理输入

   const handleInput = throttle(() => {
      getAlltabeData();
   }, 1000); // 500ms 内仅执行一次

   // 重置筛选
   const handleReset = () => {
      pageData.value.status = "";
      pageData.value.keyword = "";
      getAlltabeData();
   };

   interface StatusType {
      [key: number]: string[];
   }
   // 枚举状态
   const statusEnum = ref<StatusType>({
      0: ["待提交", "STATUS_0"],
      1: ["审核中", "STATUS_1"],
      2: ["审核完成", "STATUS_2"],
      3: ["审核拒绝", "STATUS_3"],
   });
   const loading = ref(false);
</script>

<style lang="scss" scoped>
   .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .page-box {
      @media (max-width: 1200px) {
         width: 85vw;
      }
      @media (max-width: 950px) {
         width: 65vw;
      }
   }
   // 输入框样式
   ::v-deep .el-input__wrapper {
      background-color: rgba(250, 252, 251, 1);
   }

   //表格样式

   ::v-deep .el-table {
      --el-table-header-bg-color: rgba(235, 236, 240, 1);
   }

   ::v-deep .el-table thead {
      color: #444;
   }

   //分页样式
   .pagination {
      width: calc(100% - 250px);
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding-top: 10px;
      border-top: 1px solid #98989848;
   }

   ::v-deep .el-pagination.is-background .el-pager li.is-active {
      background-color: #000 !important;
   }
   :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }
   :deep(.el-checkbox__inner:hover) {
      border-color: #626aef !important;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: #6860ff;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      border-color: #6860ff;
   }
   :deep(.el-button:hover) {
      background-color: #e2e4fd;
      color: #6860ff;
   }
   :deep(.el-input__wrapper:hover) {
      box-shadow: inset 0 0 0 1px #6860ff;
   }
</style>
